<template>
  <!-- 商品信息 -->
  <div class="container">
    <div class="body_box">
      <div class="img_box">
        <img :src="goodsDetail.pic_url" :alt="goodsDetail.pic_url" />
      </div>
      <p class="price">￥{{ (goodsDetail.price / 100).toFixed(2) }}</p>
      <div class="goods_name">{{ goodsDetail.name }}</div>
      <p class="brands">品牌商：{{ goodsDetail.brand }}</p>
      <div class="express_prompt">
        <span>
          库存：<span>{{ goodsDetail.stock }}</span>
        </span>
        <span>免邮费 顺丰快递</span>
      </div>
      <div class="detail">
        <p class="title">商品详情</p>
        <!-- v-html  解析我们的html代码 -->
        <p class="content" v-html="goodsDetail.detail_info"></p>
      </div>
    </div>
    <!-- 底部 动作栏 -->
    <van-action-bar>
      <van-action-bar-icon
        :badge="cartStore.count"
        icon="cart-o"
        text="购物车"
        @click="router.push('/cart')"
      />
      <van-action-bar-icon
        @click="collect"
        :icon="goodsDetail.collect > 0 ? 'star' : 'star-o'"
        :text="goodsDetail.collect > 0 ? '已收藏' : '未收藏'"
        color="#ff5000"
      />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="acdCart"
      />
      <van-action-bar-button
        type="danger"
        text="立即购买"
        @click="router.push(`/address-list?goodsId=${route.params.id}`)"
      />
    </van-action-bar>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getGoodsDetail } from "@/api/goods";
import { useRoute, useRouter } from "vue-router";
import { collectAdd, collectDelete } from "@/api/collect";
import { showSuccessToast } from "vant";
import { addCart, cartEdit } from "@/api/cart";
import useCartInfo from "@/store/useCartInfo";

// 获取route实例
let route = useRoute();
let router = useRouter();
let goodsDetail = ref({});
// 获取购物车仓库实例
let cartStore = useCartInfo();

// 加入购物车
let acdCart = async () => {
  // 判断当前的商品是否已经在购物车内
  // find 方法 在购物车列表内 查询是否有当前物品 有则放回对应的数据 无则返回undefined
  let data = cartStore.list.find((item) => item.goods_id == route.params.id);
  if (data) {
    // 说明购物车内 存在该商品  需要调用编辑接口 给当前商品数量+1
    await cartEdit({
      id: data.id,
      goods_id: route.params.id,
      count: cartStore.count + 1,
    });
    showSuccessToast("添加购物车成功");
    cartStore.getCartInfo();
  }
  await addCart({ goods_id: route.params.id, count: "1" });
  showSuccessToast("添加购物车成功");
  // 触发了 就从购物车仓库 action 重新获取最新的购物车数据
  cartStore.getCartInfo();
};

// 点击收藏
let collect = async () => {
  if (goodsDetail.value.collect > 0) {
    // 说明已经收藏了 执行取消收藏逻辑
    await collectDelete({ type: "1", object_id: route.params.id });
    goodsDetail.value.collect = 0;
    showSuccessToast("取消收藏成功");
  } else {
    // 未收藏  执行收藏逻辑
    await collectAdd({ type: "1", object_id: route.params.id });
    showSuccessToast("收藏成功");
    goodsDetail.value.collect = 1;
  }
};

// 挂载完成 自动调用接口 获取上平详情
onMounted(async () => {
  goodsDetail.value = (await getGoodsDetail({ id: route.params.id })).data;
});
</script>

<style lang="scss" scoped>
// 内边距离
$pad: 8px;

.body_box {
  background-color: white;
  margin: 0 10px;
  .img_box {
    width: 100%;
    text-align: center;
    img {
      width: 100%;
    }
  }
  .goods_name {
    padding: 0 $pad;
    background-color: white;
    font-size: 18px;
  }
  .brands,
  .express_prompt {
    padding: 0 $pad;
    display: flex;
    justify-content: space-between;
    color: #999999;
    font-size: 14px;
    margin: 6px 0;
  }
  .price {
    padding: 0 $pad;
    color: #f63515;
    font-size: 22px;
    margin: 6px 0;
  }
  .detail {
    .title {
      margin: 10px 0;
      font-weight: bold;
      font-size: 14px;
      color: black;
      text-align: center;
    }
    .content {
      padding: 0 12px;
      font-size: 16px;
      color: rgb(84, 84, 84);
      text-indent: 2em;
    }
  }
}
</style>